<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
    }
    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left:0;
    }
    #box2
    {
        width: 1px;
        height: 1000px;
        border-left: 1px black solid;
        position: absolute;
        left:800px
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //获取box1
        var box1=document.getElementById("box1");
        //获取btn01
        var btn01=document.getElementById("btn01");
        //定义一个timer变量
        var timer;
        //点击按钮以后，使得box1向右移动,left值增大
        btn01.onclick=function()
        {
            //每点击一次，都会开启一个新的定时器，所以需要在开启新的定时器之前关闭上一个定时器
            //每次开启定时器之前，都把之前的定时器全部清理一遍
            clearInterval(timer);
            //要让他一直执行，而不是只执行一次，可以使用定时器
            //因为需要给定时器设置一个关闭选项，所以先提前设置好定时器变量
            timer=setInterval(function()
            {
                //获取box1的原来值，但是这种方法得到的值有px单位，所以需要parseInt()来获取其中的值
                var oldValue=parseInt(getComputedStyle(box1,null)["left"]);
                //console.log(oldvalue);
                
                //给被赋值的新长度定义一个新变量
                newValue=oldValue+1;
                
                //在赋值前，给值加一些约束
                if(newValue >800)
                {
                    newValue=800;
                }
                
                //把新变量赋值给left
                box1.style.left=newValue+"px";
                
                //当元素移动到800px时，停止运动
                if(newValue >= 800)
                {
                    clearInterval(timer);
                }
            },30);
        };
        //下面这个方法需要考虑是否兼容IE8，为了方便，我直接使用getComputedStyle(obj,null)[name]
        /*
        function getStyle(obj,name)
        {
            if(window.getComputedStyle)
            {
                return getComputedStyle(obj,null)[name];
            }
            else
            {
                return obj.currentStyle[name];
            }
        }
        */
    };
    </script>
</head>
<body>
    <button id="btn01">点击按钮，box1向右移动</button>
    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>